<template>
  <el-scrollbar style="height:100%;">
    <div class="container">
      <div class="timeLineContent" :class="personInfoClass">
        <el-timeline>
          <el-timeline-item :timestamp="item.time" placement="top" v-for="(item,index) in timeline" :key="index">
            <el-card>
              <h4>{{item.content}}</h4>
              <div class="img" :style="{backgroundImage: `url(${item.img})`}"></div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <!-- 回到顶部小火箭 -->
        <template>
          <el-backtop>
            <div class="huojian">
              <i class="iconfont icon-huojian"></i>
            </div>
          </el-backtop>
        </template>
        <transition name="fade">
          <loading v-if="isLoading"></loading>
        </transition>
      </div>
      <el-footer>
        <div class="text1">Copyright © {{year}} by Kpods. All Rights Reserved.</div>
        <div class="text2">备案号......</div>
      </el-footer>
    </div>
  </el-scrollbar>
</template>

<script>
import Loading from './loading/loading.vue'
export default {
  components: { Loading },
  data() {
    return {
      timeline: [],
      year: new Date().getFullYear(),
      // Loading状态
      isLoading: true,
      // 窗口宽度
      windowWidth: document.documentElement.clientWidth
    }
  },
  created() {
    this.getTimeLine()
  },
  computed: {
    // 判断屏幕宽度
    personInfoClass() {
      if (this.windowWidth >= 1080) {
        return 'PC_layout'
      } else if (this.windowWidth < 1080 && this.windowWidth >= 812) {
        return 'middle_layout'
      } else {
        return 'mobile_layout'
      }
    }
  },
  watch: {
    // 监听屏幕宽度
    '$store.state.screenWidth': function(val) { // 监听屏幕宽度变化
      this.windowWidth = val
    }
  },
  methods: {
    getTimeLine() {
      this.$http.get('timeline').then(response => {
        this.timeline = response.data
        this.timeline.reverse()
        this.isLoading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
}
/deep/.el-scrollbar__view {
  height: 100%;
}
.container {
  height: 100%;
}
.timeLineContent {
  padding: 80px 250px 35px;
  min-height: 76.7%;
  background-image: linear-gradient(
    to right,
    rgba(253, 129, 129, 0.6),
    rgba(206, 152, 241, 0.6)
  );
  /deep/.el-timeline-item__timestamp {
    color: #24283b;
  }
}
.middle_layout {
  padding: 80px 100px 35px;
}
.mobile_layout {
  padding: 80px 20px 35px;
}
.el-footer {
  // padding: 10px 250px;
  background-color: #24283b;
  color: #fff;
  border-top: 1px solid #cccccc;
  font-size: 14px;
  font-weight: 200;
  text-align: center;
  .text1 {
    padding-top: 10px;
  }
  .text2 {
    padding-bottom: 10px;
  }
}
</style>
